<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <div>
    <a-row :gutter="10" type='flex'>
      <a-col :md="5" :sm="24">
        <a-card :bordered="false">
          <DeviceOrgTreeSysAdmin ref="devOrgTreeAdmin" :expandedkeys="defaultExpand" @changeSelect="onSelectChange" @changeExpand="onExpandChange"></DeviceOrgTreeSysAdmin>
        </a-card>
      </a-col>
      <a-col :md="19" :sm="24">
        <a-card :bordered="false">
          <div style="padding-left: 16px; height: 100%; margin-top: 5px">
            <a-row class="dmsa-tabPanel">
              <!--列表切换查看-->
              <a-button @click="btnIconClick" type="primary"
                :class="bIconShow ? 'dmsa-tabSelectButton' : 'dmsa-tabButton'" style="margin-right: 15px;">图标模式</a-button>
              <a-button @click="btnListClick" type="primary"
                :class="bListShow ? 'dmsa-tabSelectButton' : 'dmsa-tabButton'" style="margin-left: 15px;">列表模式</a-button>
            </a-row>
          </div>
          <DeviceSelectBox ref="devSelBoxAdmin" v-show="bIconShow"></DeviceSelectBox>
          <TigDeviceList ref="tigDevList" v-show="bListShow"></TigDeviceList>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>

import DeviceSelectBox from './modules/DeviceSelectBox'
import TigDeviceList from './TigDeviceList'
import DeviceOrgTree from './modules/DeviceOrganizeTree'
import DeviceOrgTreeSysAdmin from './modules/DeviceOrganizeTreeSysAdmin'
import store from '@/store/'
import { setStore, getStore } from "@/utils/storage"


export default {
  name: 'DeviceMngSysAdmin',
  mixins: [],
  components: {
    DeviceSelectBox,
    TigDeviceList,
    DeviceOrgTree,
    DeviceOrgTreeSysAdmin
  },
  data() {
    return {
      selDevice: { id: 0 },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      orgCategoryDisabled: false,
      bListShow: false,
      bIconShow: true,
      // timer: "",  //定时刷新页面数据定时器句柄
      // refreshFps: 10000,//刷新间隔时间
      colHeight: "",
      userInfo: {},
      orgTree: {},
      defaultExpand: []
    }
  },

  computed: {

  },

  methods: {
    btnListClick() {
      this.bListShow = true;
      this.bIconShow = false;
    },
    btnIconClick() {
      this.bListShow = false;
      this.bIconShow = true;
    },
    // dataRefresh() {
    //   //列表模式没有显示电压电流等竖直，所以不需要刷新
    //   if (this.bIconShow) {
    //     let data = {}
    //     data.orgCode = this.$refs.devOrgTree.getSelectOrgCode()
    //     this.$refs.devSelBox.loadData(data);
    //   }

    // },
    // setElementHeight() {
    //   this.$nextTick(() => {
    //     const height = this.$refs.rCard.$el.offsetHeight;
    //     this.colHeight = this.$refs.rCard.$el.offsetHeight + 'px';
    //     console.log("colHeight============================" + height);
    //   });
    // }
    onSelectChange(_data) {
      let data = {}
      data.orgCode = _data;
      setStore('devicemgradmin_sel_orgcode', data.orgCode)
      if (this.bIconShow)
        this.$refs.devSelBoxAdmin.loadData(data);
      else if (this.btnListClick)
        this.$refs.tigDevList.loadData(data);
    },
    onExpandChange(_data){
      //缓存展开
      setStore('devicemgradmin_sel_expand', _data)
    }
  },

  created() {
    //this.timer = setInterval(this.dataRefresh, this.refreshFps);
    this.bIconShow = true
    this.bListShow = false
    this.userInfo = store.getters.userInfo
    this.defaultExpand = getStore('devicemgr_sel_expand') != undefined ? getStore('devicemgr_sel_expand') : [];
    this.$nextTick(() => {
      let saveOrgCode = getStore('devicemgradmin_sel_orgcode');
      if (saveOrgCode != undefined)
        this.onSelectChange(saveOrgCode)
      else
        this.onSelectChange(store.getters.userInfo.orgCode);
    }
    )
  },

  mounted() {

  },

  beforeDestroy() {
    //clearInterval(this.timer);
  },

  watch: {
    bListShow(val) {
      let data = {}
      data.orgCode = this.$refs.devOrgTreeAdmin.getSelectOrgCode()
      this.$refs.tigDevList.loadData(data);
      //this.setElementHeight();
    },
    bIconShow(val) {
      let data = {}
      data.orgCode = this.$refs.devOrgTreeAdmin.getSelectOrgCode()
      this.$refs.devSelBoxAdmin.loadData(data);
      //this.setElementHeight();
    },
  }
}
</script>
<style scoped>
.dmsa-tabPanel {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #7074763b;
  box-shadow: 1px 1px rgb(219, 207, 207);
  height: 48px;
  width: 260px;
  border-radius: 40px;
  margin-bottom: 10px;

  .dmsa-tabSelectButton {
    border-radius: 15px;
    height: 30px;
    margin-right: 10px;
  }

  .dmsa-tabButton {
    background-color: #fff;
    border-color: #fff;
    color: black;
    text-shadow: none;
    box-shadow: none;
    font-weight: 300;
  }
}

</style>